<template>
	<div class="event-list">
		<Notice></Notice>
		<u-navbar :is-back="false">
			<view class="top flex">
				<u-tabs class="tab" :list="tabs" :current="current" @change="change"></u-tabs>
				<span class="add" @click="add">创建事件</span>
			</view>
		</u-navbar>
		<div class="container">
			<z-paging ref="paging1" :fixed="false" class="list" v-model="list1" refresher-only @onRefresh="refresh" v-show="current==0">
				<div class="event" v-for="item in list1" :key="item.id" @click="toEventInfo(item)">
					<div class="title">{{ item.title }}</div>
					<div class="data flex">
						<div class="data-1">
							<div class="count count-1">{{ item.increment_hour }}</div>
							<div class="label">近一小时增量</div>
						</div>
						<div class="data-2">
							<div class="count count-2">{{ item.total }}</div>
							<div class="label">全部信息</div>
						</div>
						<div class="data-3">
							<div class="count count-3">{{ item.comment_count }}</div>
							<div class="label">相关评论</div>
						</div>
					</div>
					<div class="opt flex">
						<div class="l">{{ item.event_start }} ~ {{ item.event_end }}</div>
						<div class="r flex">
							<span @click.stop="edit(item)">
								<u-icon name="edit-pen" color="#999" size="36" style="margin-right: 10rpx;"></u-icon>
							</span>
							<span @click.stop="del(1,item)">
								<u-icon name="trash" color="#999" size="36"></u-icon>
							</span>
						</div>
					</div>
				</div>
				<div class="empty" v-if="!loading && !list1.length">暂无数据</div>
			</z-paging>
			<z-paging ref="paging2" :fixed="false" class="list" v-model="list2" refresher-only @onRefresh="refresh" v-show="current==1">
				<div class="event" v-for="item in list2" :key="item.id">
					<div class="title">{{ item.title }}</div>
					<div class="opt flex">
						<div class="l">{{ item.event_start }} ~ {{ item.event_end }}</div>
						<div class="r flex">
							<u-icon name="trash" color="#999" size="32" @click="del(2,item)"></u-icon>
						</div>
					</div>
				</div>
				<div class="empty" v-if="!loading && !list2.length">暂无数据</div>
			</z-paging>
			<u-loading class="loading" mode="circle" :show="loading" size="48"></u-loading>
		</div>

		<u-toast ref="uToast" />
		<u-modal v-model="show" content="确定删除么？" :show-cancel-button="true" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>
	</div>
</template>

<script>
import { eventList, eventListExpire, eventExpire, eventDel } from "@/api/event.js";

export default {
	data() {
		return {
			tabs: [
				{
					name: "我的"
				}, 
				{
					name: "往期"
				}
			],
			current: 0,
			list1: [],
			list2: [],
			loading: true,

			show: false,
			delType: 1,
			delId: "",
		}
	},
	onLoad() {
		this.getData();
		this.getDataExpire();
	},
	methods: {
		change(val) {
			this.current = val;
		},
		refresh() {
			if(this.current == 0){
				this.getData();
			}else if(this.current == 1){
				this.getDataExpire();
			}
		},
		getData() {
			eventList().then(({data})=>{
				this.loading = false;
				this.list1 = data.list;
				this.$refs.paging1.endRefresh();
			});
		},
		getDataExpire() {
			eventListExpire().then(({data})=>{
				this.loading = false;
				this.list2 = data.list;
				this.$refs.paging2.endRefresh();
			});
		},
		edit(row) {
			uni.navigateTo({
				url: "/pages/eventSet/eventSet?id="+row.id
			});
		},
		del(type, row) {
			this.show = true;
			this.delType = type;
			this.delId = row.id;
		},
		confirm() {
			if(this.delType == 1){
				eventExpire({id: this.delId}).then(({code})=>{
					this.$refs.uModal.clearLoading();
					if (code == 200) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: "success",
						});
						this.show = false;
						this.refresh();
					}
				});
			}else if(this.delType == 2){
				eventDel({id: this.delId}).then(({code})=>{
					this.$refs.uModal.clearLoading();
					if (code == 200) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: "success",
						});
						this.show = false;
						this.refresh();
					}
				});
			}
		},
		add() {
			if(this.loading) return;
			if(this.list1.length == 3){
				this.$refs.uToast.show({
					title: "最多创建3个事件",
					type: "warning",
				});
			}else{
				uni.navigateTo({
					url: "/pages/eventSet/eventSet"
				});
			}
		},
		toEventInfo(row){
			uni.navigateTo({
					url: "/pages/eventInfo/eventInfo?id="+row.id
				});
		},
	}
}
</script>

<style lang="scss" scoped>
.event-list{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.top{
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 10rpx;
	box-sizing: border-box;
}
.add{
	margin-top: 8rpx;
	margin-right: 10rpx;
}
.tab{
	padding-bottom: 10rpx;
}
.container{
	flex-grow: 1;
}
.list{
	height: 100%;
	padding: 0 20rpx;
	.event{
		margin-top: 20rpx;
		border: 1rpx solid #F0F0F0;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 12rpx;
	}
	.title{
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.data{
		margin-bottom: 20rpx;
	}
	.data-1,.data-2,.data-3{
		text-align: center;
		margin-left: 20rpx;
		.label{
			font-size: 24rpx;
		}
	}
	.count{
		font-weight: bold;
	}
	.count-1{
		color: #F6636A;
	}
	.count-2{
		color: #3678F8;
	}
	.count-3{
		color: #CC3BFB;
	}
}
.opt{
	justify-content: space-between;
	.l{
		font-size: 24rpx;
		color: #999;
	}
}
.loading{
	margin: auto;
	display: block;
	margin-top: 60rpx;
}
.empty{
	text-align: center;
	color: #666;
	margin-top: 60rpx;
}
</style>
